<template>
  <div class="">
        <div v-if="title" class="font-weight-bold p-16">
            {{ title }}
        </div>
        <com-form
            v-if="fieldConfigs && fieldData"
            ref="comForm"
            :configs="fieldConfigs"
            :labelWidth="labelWidth"
            :label-suffix="labelSuffix"
            v-bind="$attrs"
        />
    </div>
</template>

<script>
export default {
    props: {
        fieldList: {
            type: Array
        },
        title: {
            type: String
        },
        labelName: {
            type: String,
            default: 'label'
        },
        valueName: {
            type: String,
            default: "value"
        },
        fieldconfgFn: {
            type: Function
        },
        labelSuffix: {
            type: String,
            default: "："
        },
        labelWidth: {
            type: String,
            default: 'auto'
        }
    },
    data() {
        return {
            fieldData: {}
        }
    },
    computed: {
        fieldConfigs() {
            let {fieldList} = this;
            let configs = [];
            configs = (fieldList||[]).map((item, index) => {
                let key = index+'';
                let label = item[this.labelName];
                let value = item[this.valueName];

                this.fieldData[key] = value;
                let itemConfig = {
                    key: key,
                    label: label,
                    default: value,
                    type: 'string'
                }

                if(this.fieldconfgFn && typeof this.fieldconfgFn === 'function') {
                    let newConfig =  this.fieldconfgFn(item);
                    if(newConfig) {
                        Object.assign(itemConfig, newConfig||{});
                    }
                }
                if(itemConfig.type === 'image' ) {
                    itemConfig.type = 'render';
                    if(!itemConfig.render) {
                        itemConfig.render = (h, vm, configItem, itemValue) => {
                            let imgList = Array.isArray(itemValue) ? itemValue : [itemValue];
                            return (
                                <div>
                                    {imgList.map((img) => {
                                        return (
                                            <el-image
                                                class="mr-4 border-color-gray"
                                                fit="contain"
                                                style="width: 100px; height: 100px"
                                                src={img}
                                                preview-src-list={imgList}
                                            ></el-image>
                                        );
                                    })}
                                </div>
                            );
                        }
                    }
                }
                return itemConfig;
            })
            return configs;
        }
    },
    watch: {

    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>

</style>